<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>is标签</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<!-- <table>
			<tbody>
				<tr is="row"></tr>
				<tr></tr>
				<tr></tr>
			</tbody>
		</table> -->
		<!-- <div 
			ref="hello" 
			@click="handleClick"
		>
			Hello world
		</div> -->
		<counter ref="one" @change="handleChange"></counter>
		<counter ref="two" @change="handleChange"></counter>
		{{total}}
	</div>
	<script>

		/*const name = {
			age:278,
			sex:"man"
		};
		console.log(name.age);
		name.age = 222;
		console.log(name.age);
		Vue.component("row",{
			data:function(){
				return {
					content:"this is a data"
				}
			},
			template:"<tr><td>this is a row</td></tr>"
		});*/
		Vue.component("counter",{
			template:'<div @click="handleClick">{{number}}</div>',
			data:function(){
				return {
					number:0
				}
			},
			methods:{
				handleClick:function(){
					this.number++
					this.$emit('change');
				}
			}
		})
		var vm = new Vue({
			el:"#root",
			data:{
				total:0
			},
			methods:{
				handleClick:function(){
					console.log(this.$refs.hello.innerHTML);
				},
				handleChange:function(){
					this.total = this.$refs.one.number + this.$refs.two.number
				}
			}
		});
	</script>
</body>
</html>